<template>
  <div ref="modalParent">
    <a-modal
      :zIndex="zIndex ? zIndex : 1000"
      :title="dialogInfo.title"
      :visible="dialogInfo.visible"
      :destroyOnClose="true"
      :maskClosable="false"
      :ref="dialogInfo.ref"
      @cancel="handleCancel"
      :width="dialogInfo.width !== undefined ? dialogInfo.width + '!important' : '520px'"
      v-if="dialogInfo.action === true && dialogInfo.visible === true"
      :getContainer="getContainer"
      :wrapClassName="dialogInfo.fullModal === true ? 'full-modal' : 'dialog-box'"
    >
      <template v-if="dialogInfo.show && dialogInfo.isRule === true">
        <a-form-model :ref="dialogInfo.ref" :model="dialogInfo.form" :rules="dialogInfo.rules" :label-col="dialogInfo.labelCol" :wrapper-col="dialogInfo.wrapperCol">
          <slot></slot>
        </a-form-model>
      </template>
      <template v-if="dialogInfo.show && dialogInfo.isRule !== true">
        <slot></slot>
      </template>
      <template slot="footer">
        <a-button v-if="dialogInfo.btn === undefined" key="back" @click="handleCancel">取消</a-button>
        <a-button v-if="dialogInfo.btn === undefined" key="submit" type="primary" @click="handleOk" :loading="dialogInfo.loading">确定</a-button>
        <slot v-if="dialogInfo.btn" :name="dialogInfo.btn"></slot>
      </template>
    </a-modal>
    <a-modal
      :title="dialogInfo.title"
      :visible="dialogInfo.visible"
      :destroyOnClose="true"
      :maskClosable="false"
      @cancel="handleCancel"
      :width="dialogInfo.width !== undefined ? dialogInfo.width : '520px'"
      v-if="dialogInfo.action === false && dialogInfo.visible === true"
      :wrapClassName="dialogInfo.fullModal === true ? 'full-modal' : 'dialog-box'"
      :footer="null"
      ref="modal"
    >
      <template v-if="dialogInfo.show">
        <slot></slot>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'DialogBox',
  props: ['dialogInfo', 'zIndex'],
  data() {
    return {}
  },
  methods: {
    getContainer() {
      return this.$refs.modalParent
    },
    handleOk() {
      this.dialogInfo.loading = true
      this.$emit('saveData', this.dialogInfo)
    },
    handleCancel() {
      this.dialogInfo.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::deep .dialog-box {
  .ant-modal-title {
    font-size: 18px;
    font-weight: 400;
  }
  .ant-modal-body {
    max-height: 600px;
    height: auto;
    min-height: 100px;
    overflow: auto;
  }
}
::deep .full-modal {
  .ant-modal-title {
    font-size: 18px;
    font-weight: 400;
  }
  .ant-modal {
    width: 100% !important;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    padding: 0;
    text-align: center;
    overflow-y: hidden;
  }
}
</style>